<template>
    <div id="create-edit-container">
        <el-drawer
            direction="rtl"
            :visible.sync="stateManager.DialogVisible"
            :title="modalTitle"
            custom-class="demo-drawer"
            ref="drawer"
            :append-to-body="true"
            size="40%">
            <div class="dialog-drawer-content">
                <div class="content" style="flex: 1">
                    <div class="col">
                        <el-upload action="/api/cms/asset"
                                   ref="upload"
                                   multiple
                                   :data="parameter"
                                   :headers="headers"
                                   :show-file-list="false"
                                   :on-error="uploadFailedCallback"
                                   :before-upload="handleBeforeUpload"
                                   :on-success="uploadSuccessCallback"
                        >
                            <el-button size="small" type="primary">点击上传
                                <i class="el-icon-upload el-icon--right"></i></el-button>
                        </el-upload>
                    </div>
                    <hr>
                    <div class="container" style="margin-top: 1.5rem">
                        <div class="row picker-container">
                            <template v-for="(item,index) in tableList.items">

                                <div

                                    class="col-xl-3 col-lg-3 col-md-6 col-sm-6" @click="checkedImg(item,multiple)">
                                    <div class="single-cat-item" :class="{shadow:interviewImg.Listids.indexOf(item.id)>=0}">
                                        <img   :src="item.path" alt="">
                                        <div class="item-meta"  >
                                            <span> <h4>{{item.name}} </h4> </span><p>上传于{{item.created_at}}</p>
                                            <span class="watch-list-btn" v-for="item in item.tags">{{item}}</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="dialog-drawer-footer">
                    <div class="dialog-drawer-footer row">
                        <div class="col">
                            <el-pagination
                                background
                                layout="prev, pager, next,total"
                                :page-size="18"
                                :total="list.total"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage">
                            </el-pagination>
                        </div>
                            <div class="col pull-right">
                                <el-button type="ghost" @click="closeDialog" >取消</el-button>
                                <el-button type="primary" @click="saveModel"   :loading="isLoading" >{{isLoading?'提交中':'确定'}}</el-button>
                            </div>

                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
  import { getToken } from '@/utils/auth'

  export default {
    props: {
      stateManager: {
        type: Object,
      },
      multiple: '',
    },
    data: function () {
      return {
        list: this.$listDataSource({
          url: '/api/cms/asset',
        }),
        imageRefreshList: true,
        isLoading: false,
        imgIndex: 0,
        activeName: 'image',
        isActive: '',
//          是否清空标签栏
        isClear: '',
        interviewImg: {
          Listids: [],
          listthumbs: [],
        },
        headers: {'Authorization': 'Bearer ' + getToken()},
        currentPage: 1,
        parameter: {
          type: 'image',
          tags: [],
        },
        query: {
          page: 1,
          type: 'image',
          tags: [],
        },
      }
    },
    methods: {
      checkedImg (item, multiple) {
        if (multiple == true) {
        }
        else if (multiple == false) {
          this.interviewImg.Listids.splice(0)
          this.interviewImg.listthumbs.splice(0)
        }
        console.log('当前id' + this.interviewImg.Listids)
        var ids = this.interviewImg.Listids.indexOf(item.id)
        console.log('fff', ids)
        if (ids >= 0) {
          //如果包含了该ID，则删除（单选按钮由选中变为非选中状态）
          this.interviewImg.Listids.splice(ids, 1)
          this.interviewImg.listthumbs.pop(item.path)
        }
        else {
          //选中该按钮
          this.interviewImg.Listids.push(item.id)
          this.interviewImg.listthumbs.push(item.path)
        }
        ids = this.interviewImg.Listids.indexOf(item.id)
        console.log('ggg', ids)
        console.log('子的id' + this.interviewImg.Listids)
        console.log('子的路径' + this.interviewImg.listthumbs)
      },
      handleClick (type) {
        let self = this
        self.query = {}
        self.parameter.type = type
        self.query.type = self.parameter.type
        self.imageRefreshList = true
      },

      postTag (e) {
        let self = this
        console.log(e)
        self.parameter.tags = e
        this.query.tags = self.parameter.tags
        self.imageRefreshList = true
      },
      uploadSuccessCallback: function (response, file) {
        //上传成功回调
        console.log(file)
        this.$message({
          message: '成功上传',
          type: 'success',
        })
        this.imageRefreshList = true
      },
      uploadFailedCallback: function (error, file) {
        //上传失败回调
        console.log(error)
        console.log(file)
        this.$Notice.error({
          title: '上传失败',
          desc: error,
        })
      },
      handleBeforeUpload () {
        return true
      },
      // 翻页
      handleCurrentChange (val) {
        this.currentPage = val
        this.query.page = val
        this.imageRefreshList = true
      },
      closeDialog: function () {
        this.stateManager.DialogVisible = false
        this.interviewImg.Listids = []
        this.interviewImg.listthumbs = []
        this.isClear = true
      },
      saveModel: function () {
        this.$emit('submitPicture', this.interviewImg)
        this.closeDialog()
      },
    },
    computed: {
      modalTitle: function () {
        return '选择图片'
      },
      tableList () {
        let self = this
        if (this.imageRefreshList) {
          this.list.fetch(self.query, function () {
            self.imageRefreshList = false
          })
        }
        return this.list
      },
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this
        this.model.fetch(newValue, {}, function () {
          self.stateManager.buttonLoading = false
          self.stateManager.editDialogVisible = true
        }, function () {
          self.stateManager.buttonLoading = false
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
    .el-dialog__body {
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        display: block;
    }

    .card-img-top {
        height: 100px;
        margin-top: 20px;
    }

    .time {

        font-size: 13px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .shadow {
        box-shadow: 0 0 2px 2px #1ab394 !important;
    }

    .checked {
        color: #1ab394;
    }

    .imginfo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

</style>
